<template>
<!-- Hero Section -->
<section id="hero" class="hero section dark-background">
    <div class="container">
    </div>
</section><!-- /Hero Section -->
<!-- Details Section -->
<section id="details" class="details section">

    <!-- Section Title -->
    <div class="container section-title" data-aos="fade-up">
        <h2>Operation</h2>
        <div><span>Watch</span> <span class="description-title">Video</span></div>
    </div><!-- End Section Title -->

    <div class="container">

        <div class="row gy-4 align-items-center features-item">
            <video-player src="https://file-examples.com/storage/fe519944ff66ba53b99c446/2017/04/file_example_MP4_640_3MG.mp4" :playsinline="true" controls :loop="false" :volume="0.6" :disablePictureInPicture="true" :liveui="true"/>
        </div><!-- Features Item -->

    </div>

</section><!-- /Details Section -->
</template>

<script>
import {
    VideoPlayer
} from '@videojs-player/vue'
</script>

<style scoped>
.main .hero {
    min-height: 15vh;
    padding: 10px 0;
}
</style>
